﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>demo</title>
    <link href="css/xspreadsheet.css" rel="stylesheet">
    </head>
<body onload="load()">
<div id="x-spreadsheet-demo"></div>
<script>
    function load(){
        var xs = x.spreadsheet('#x-spreadsheet-demo', {showToolbar: true, showGrid: true})
            .loadData({
                freeze: 'B3',
                styles: [
                    {
                        bgcolor: '#f4f5f8',
                        textwrap: true,
                        color: '#900b09',
                        border: {
                            top: ['thin', '#0366d6'],
                            bottom: ['thin', '#0366d6'],
                            right: ['thin', '#0366d6'],
                            left: ['thin', '#0366d6'],
                        },
                    },
                ],
                merges: [
                    'C3:D4',
                ],
                rows: {
                    1: {
                        cells: {
                            0: { text: 'testingtesttestetst' },
                            2: { text: 'testing' },
                        },
                    },
                    2: {
                        cells: {
                            0: { text: 'render', style: 0 },
                            1: { text: 'Hello' },
                            2: { text: 'haha', merge: [1, 1] },
                        }
                    },
                    8: {
                        cells: {
                            8: { text: 'border test', style: 0 },
                        }
                    }
                },
            }).change((cdata) => {
                console.log(cdata);
                console.log(xs.validate());
            });
    }
</script>
<script type="text/javascript" src="js/xspreadsheet.js"></script></body>
</html>